<!--
 * @Author: dengyl
 * @Date: 2022-01-11 19:51:35
 * @LastEditTime: 2022-07-23 16:29:28
 * @LastEditors: 代琪 1529992814@qq.com
 * @Description: 新闻-列表组件
 * @FilePath: \code\ctp-static-portal-front\src\components\Bulletin\components\list.vue
-->

<template>
  <div class="news-list pannel-list-wrapper" :style="themStyle">
    <ul>
      <li v-for="(item, index) in visibleList" :key="index">
        <div class="list-left">
          <!--标记-->
          <span class="frontIcon vportal vp-spot" v-if="rowList.includes('symbolNumber')"></span>
          <template v-if="item.extText">
            <section v-for="(ext, i) in item.extText" :key="i" class="ib">
              <Tag :value="ext[0]" />
            </section>
          </template>
          <!--链接，跳转到新窗口-->
          <a target="_blank" :href="`${basePath}${item.link}`" @click="setVisitedStyle">{{
            item.subject
          }}</a>
          <!--图标-->
          <icon :item="item" />
        </div>
        <!--根据宽度判断显示哪些基本信息-->
        <div class="list-right">
          <span v-if="rowList.includes('publishDate')">
            <span>{{ item.createDate.split(' ')[0] }}</span>
          </span>
          <span v-if="rowList.includes('type')" class="name">
            <span>{{ item.categoryLabel }}</span>
          </span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  import Tag from './tag';
  import Icon from '../../common/newsTitleIcons.vue';
  import { rowList } from '@/mixins';
  import { methods } from '@/utils';
  export default {
    name: 'BulletinList',
    components: {
      Tag,
      Icon
    },
    mixins: [rowList],
    props: {
      list: {
        type: Array,
        default: () => []
      },
      options: {
        type: Object,
        default: () => ({})
      },
      sectionStyle: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        basePath: `${_basePath}/`,
        height: methods.getContentHeight(this.options), //高度
        visibleList: []
      };
    },
    computed: {
      themStyle() {
        let height = '100%';
        if (this.options.height) {
          height = this.height + 'px';
        }
        return {
          height,
          background: this.options.backgroundColor || 'transparent'
        };
      }
    },
    created() {
      this.visibleList = this.list ? this.list.slice(0, Math.floor(this.height / 32)) : [];
    },
    mounted() {
      // console.log('list: ', this.list)
      // console.log('sectionStyle: ', this.sectionStyle);
    },
    methods: {
      /**
       * @description: 给链接添加点击后状态
       */
      setVisitedStyle(e) {
        e.target.className.search('is-visited') == -1 && (e.target.className += 'is-visited');
      }
    }
  };
</script>
<style scoped lang="scss">
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  .news-list {
    width: 100%;
    padding: 10px;

    .vp-spot {
      color: #999;
    }

    > ul {
      padding: 0;
      margin: 0;
      list-style: none;

      > li {
        position: relative;
        height: 32px;
        // padding: 5px 0;
        font-size: 14px;

        > div {
          .list-symbol {
            display: inline-block;
            width: 5px;
            height: 5px;
            margin-right: 10px;
            background-color: #111;
            border: 1px solid #111;
            border-radius: 100%;
          }
        }

        > .list-right {
          position: absolute;
          top: 0;
          right: 0;
          width: 130px;
          overflow: hidden;
          font-size: 12px;
          color: #999;
          text-overflow: ellipsis;
          white-space: nowrap;
          justify-content: center;
          align-items: center;

          > .name {
            margin-left: 5px;
          }
        }

        > .list-left {
          margin-right: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;

          > div {
            display: inline-block;
          }

          > a {
            color: #111;

            &:hover {
              color: #1890ff;
              cursor: pointer;
            }
          }

          .is-visited {
            color: rgba(107, 105, 105, 0.7);
          }
        }
      }
    }
  }

  .ib {
    display: inline-block;
  }
</style>
